<template>
  <div>
    <div class="container">
      <input
        class="pt1"
        type="file"
        @change="handleFileChange"
        accept="video/*"
      />
      <button @click="upload" class="bt1">Upload</button>
      <div>
        <h4 class="h_4">下载链接:</h4>
        <ul class="u_1">
          <li v-for="(link, index) in downloadLinks" :key="index">
            <a class="a1" :href="link.url" :download="link.name">{{
              link.name
            }}</a>
          </li>
        </ul>
      </div>
    </div>
    
    <div v-if="videoUrl" class="ved_box">
      <h4 class="h_4">视频播放:</h4>
      <video controls class="ved_2" poster="https://lmg.jj20.com/up/allimg/tp04/1Z9261951134964-0-lp.jpg">
        <source :src="videoUrl" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,Ref } from "vue";

//切片大小限制
const size: number = 1024 * 1024; // 每个切片的最大大小（这里设置为1MB）

//存储切片数组
const chunks: Ref<Blob[]> = ref([]);

//存储下载链接数组
const downloadLinks = ref<{ url: string; name: string }[]>([]);

//存储上传视频的url地址
const videoUrl = ref("");

//总切片数 、已上传切片数、合并完成后的文件、合并的文件名字
let totalChunks: number = 0;
let uploadedChunks: number = 0;
let mergedFile: Blob | null = null;
let mergedFileName: string = "";

//处理文件选择
const handleFileChange = (event: Event): void => {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files.length > 0) {
    splitFileIntoChunks(input.files[0]);
  }
};

//文件分成多个切片
const splitFileIntoChunks = (file: Blob): void => {
  const fileSize: number = file.size;
  //计算总切片数量
  totalChunks = Math.ceil(fileSize / size);
  //记录合并完成的文件名字
  mergedFileName = file.name;
  for (let i = 0; i < totalChunks; i++) {
    const start: number = i * size;
    const end: number = Math.min(start + size, fileSize);
    //实现切片效果
    const chunk: Blob = file.slice(start, end);
    //切片添加到chunks数组
    chunks.value.push(chunk);
  }
};

// 上传所有切片
const upload = (): void => {
  //检查是否有切片
  if (chunks.value.length === 0) return;
  //将切片合并为一个对象
  mergedFile = new Blob(chunks.value, { type: chunks.value[0].type });
  //保存上传结果
  saveUploadResult(mergedFile, mergedFileName);
  console.log("Merged file saved.");
};

//存储地址、传送url、下载链接实现
const saveUploadResult = (mergedFile: Blob, mergedFileName: string) => {
  //创建一个存储文件url
  const url: string = URL.createObjectURL(mergedFile);
  //创建一个a元素模拟下载链接
  const link: HTMLAnchorElement = document.createElement("a");
  //将url的传给link 
  link.href = url;
  //设置文件的下载名字
  link.download = mergedFileName;
  //给这个元素转化为块级元素
  link.style.display = "block";
  //将下载链接添加到渲染数据组中
  downloadLinks.value.push({ url, name: mergedFileName });
  //如果是一个视频  那就将url地址传递给地址容器之中
  if (mergedFileName.endsWith(".mp4")) {
    videoUrl.value = url;
  }
};

</script>
<style lang="scss" scoped>
.container {
  max-width: 500px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.pt1 {
  margin-bottom: 10px;
}

.bt1 {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bt1:hover {
  background-color: #0056b3;
}

.h_4 {
  margin-top: 20px;
}

.u_1 {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.a1 {
  color: #007bff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.a1:hover {
  color: #0056b3;
}

.ved_box {
  width: 400px;
  height: 400px;
  margin-top: 20px;
}

.ved_2 {
  width: 100%;
  border-radius: 4px;
}
</style>